<template>
  <div class="register-container">

    <div ref="box" class="box">
      <div class="reg-box">

        <div class="top">欢迎注册</div>

        <div class="content">

          <div class="name c-box">
            <div class="row">
              <div class="text">昵 称</div>
              <div class="input">
                <Input v-model.trim="nickName"
                       size="large"
                       maxlength="20"
                       show-word-limit
                       clearable
                       @on-blur="checkNickName"
                       @on-enter="goNext('nickName')"
                       placeholder="请输入昵称"/>
              </div>
            </div>
            <div class="tip">{{ nickNameTip }}</div>
          </div>

          <div class="email c-box">
            <div class="row">
              <div class="text">邮 箱</div>
              <div class="input">
                <Input v-model.trim="email"
                       size="large"
                       ref="email"
                       clearable
                       @on-blur="checkEmail"
                       @on-keyup="checkEmail()"
                       @on-enter="goNext('email')"
                       placeholder="请输入邮箱"/>
              </div>
            </div>
            <div class="tip">{{ emailTip }}</div>
          </div>

          <div class="iphone c-box">
            <div class="row">
              <div class="text">手机号</div>
              <div class="input">
                <Input v-model.trim="iphoneNo"
                       ref="iphoneNo"
                       size="large"
                       clearable
                       @on-blur="checkIphone"
                       @on-keyup="checkIphone()"
                       @on-enter="goNext('iphoneNo')"
                       placeholder="可用于登录和找回密码"/>
              </div>
            </div>
            <div class="tip">{{ iphoneNoTip }}</div>
          </div>

          <div class="pwd c-box">
            <div class="row">
              <div class="text">密 码</div>
              <div class="input">
                <Input v-model.trim="pwd"
                       size="large"
                       ref="pwd"
                       type="password"
                       @on-blur="checkPwd"
                       @on-enter="goNext('pwd')"
                       clearable
                       placeholder="请输入密码"/>
              </div>
            </div>
            <div class="tip">{{ pwdTip }}</div>
          </div>

          <div class="v-code c-box">
            <div class="row slider" v-if="sliderFlag">
              <slide-verify :l="42"
                            :r="10"
                            :w="310"
                            :h="155"
                            @success="onSuccessSlider"
                            @fail="onFailSlider"
                            @refresh="onRefreshSlider"
                            slider-text="向右拖动滑块对齐空白"
              ></slide-verify>
            </div>
            <div class="row" v-if="!sliderFlag">
              <div class="text">验证码</div>
              <div class="input" style="display: flex;justify-content: space-between">
                <div style="width:50%">
                  <Input v-model.trim="verifyCode"
                         size="large"
                         style="width:100%"
                         ref="vCode"
                         type="text"
                         @on-blur="checkVerCode"
                         @on-enter="goNext('vCode')"
                         clearable
                         placeholder="验证码"/>
                </div>
                <div style="width:40%">
                  <div class="yzm" v-if="!isSendCode" @click="sendCode">验证码</div>
                  <div class="djs" v-if="isSendCode">
                    倒计时
                    <span style="color:#F00">{{ s }}</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="tip">{{ verifyCodeTip }}</div>
          </div>

          <div class="read">
            <Checkbox v-model="isRead" style="font-size: 12px">
              阅读并接受<a href="https://www.baidu.com" target="_blank">《小猿邦用户协议》</a>及<a href="https://www.baidu.com"
                                                                                    target="_blank">《小猿邦保护权声明》</a>
            </Checkbox>
            <div class="tip"
                 v-if="!isRead"
                 style="font-size: 12px;color: #F00;margin-top:4px">
              {{ readTip }}
            </div>
          </div>
          <!--          <div :class="{'btn-isRead':isRead,'btn-isNotRead':!isRead}">
                      注 册
                    </div>-->
          <div class="btn-isRead" v-if="isRead" @click="reg">
            注 册
          </div>
          <div class="btn-isNotRead" v-if="!isRead">
            注 册
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  //组件名称
  name: "Register",
  //组件注册
  components: {},
  //数据驱动
  data() {
    return {
      nickName: "",
      iphoneNo: "",
      email: "",
      pwd: "",
      verifyCode: "",
      s: 30,  //倒计时
      c: null,
      isSendCode: false,
      sliderFlag: false,

      nickNameTip: "",
      iphoneNoTip: "",
      emailTip: "",
      pwdTip: "",
      verifyCodeTip: "",
      readTip: `请勾选"阅读并接受用户协议"`,
      isRead: true
    }
  },
  //计算属性
  computed: {},
  //数据监听
  watch: {},
  //方法
  methods: {
    //去下一个input
    goNext(tab) {
      switch (tab) {
        case 'nickName':  //如果是昵称,跳转到手机号
          this.$refs.iphoneNo.focus({
            end: true
          })
          break;
        case 'iphoneNo':  //如果是手机号跳转到邮箱
          this.$refs.email.focus({
            end: true
          })
          break;
        case 'email':  //如果是邮箱跳转到密码
          this.$refs.pwd.focus({
            end: true
          })
          break;
        case 'pwd':  //如果是密码,注册
          this.$refs.vCode.focus({
            end: true
          })
          break;
        case "vCode": //如果是验证码
          this.reg()
          break;
      }
    },
    checkNickName() {
      let b = this.check.isNull(this.nickName);
      if (b) {  //true 表示 null
        this.nickNameTip = "请输入昵称"
        return false
      } else {
        this.nickNameTip = ""
        let length = this.nickName.trim().length;
        if (length < 1 || length > 20) {
          this.nickNameTip = "请设置 1 到 20 个字符的昵称"
          return false;
        }
      }
      return true
    },
    //校验手机号格式和是否已经注册
    checkIphone() {
      let b0 = this.check.isNull(this.iphoneNo);
      if (b0) { // true为null
        this.iphoneNoTip = "手机号不能为空"
        return false
      }
      let b = this.check.isPhoneNo(this.iphoneNo);
      if (!b) {  // ture规范
        this.iphoneNoTip = "手机号格式错误"
        return false
      } else {
        this.iphoneNoTip = ""
      }
      //('查询后台手机号是否已经注册')
      this.axios.get(`/login-web/user/iphone-no`, {
        params: {
          iphoneNo: this.iphoneNo
        }
      })
          .then((data) => {
            if (data.data) {  //如果 true 表示已经注册
              this.iphoneNoTip = "手机号已经注册"
              return false
            } else {
              this.iphoneNoTip = ""
              return true
            }
          })
    },
    checkIphoneIsNull() {
      let b0 = this.check.isNull(this.iphoneNo);
      if (b0) { // true为null
        this.iphoneNoTip = "手机号不能为空"
        return false
      }
      let b = this.check.isPhoneNo(this.iphoneNo);
      if (!b) {  // ture规范
        this.iphoneNoTip = "手机号格式错误"
        return false
      } else {
        this.iphoneNoTip = ""
        return true
      }
    },
    checkEmail() {
      let b0 = this.check.isNull(this.email);
      if (b0) { // true为null
        this.emailTip = "邮箱不能为空"
        return false
      }
      let b = this.check.isEmail(this.email);
      if (!b) {  // ture规范
        this.emailTip = "邮箱格式错误"
        return false
      } else {
        this.emailTip = ""
        return true
      }
      //('查询后台邮箱号是否已经注册')
      /* this.axios.get(`/login-web/user/email`, {
         params: {
           email: this.email
         }
       })
           .then((data) => {
             if (data.data) {  //如果 true 表示已经注册
               this.emailTip = "邮箱号已经注册"
               return false
             } else {
               this.emailTip = ""
             }
           })*/
    },
    checkPwd() {
      let b = this.check.isNull(this.pwd);
      if (b) { // true为null
        this.pwdTip = "密码不能为空"
        return false
      } else {
        this.pwdTip = ""
        let length = this.pwd.trim().length;
        if (length < 6 || length > 18) {
          this.pwdTip = "请设置 6 到 18 位的密码"
          return false
        }
      }
      return true
    },
    //校验验证码
    checkVerCode() {
      this.verifyCodeTip = ""
      let b0 = this.check.isNull(this.verifyCode);
      if (b0) { // true为null
        this.verifyCodeTip = "验证码不能为空"
        return false
      }else{
        this.verifyCodeTip = ""
        return true
      }
      return true
    },
    //发送验证码
    sendCode() {
      this.verifyCode = ""
      this.verifyCodeTip = ""
      let b = this.checkIphoneIsNull();
      if (!b) {
        return false
      }
      this.sliderFlag = true;
      return;
    },
    //滑块验证成功
    onSuccessSlider() {
      this.sliderFlag = false;  //滑块隐藏
      this.isSendCode = true;   //开始倒计时
      this.c = setInterval(() => {
        this.s--;
        if (this.s == 0) {
          this.isSendCode = false
          this.s = 30
          clearInterval(this.c);
        }
      }, 1000)

      this.axios.post(`/sms/register/code/${this.iphoneNo}`)
          .then(() => {
            this.verifyCodeTip = "验证码已发送"
            this.verifyCode = ""
          })
          .catch(() => {
            this.verifyCodeTip = "验证码发送失败,请重试"
            clearInterval(this.c);
            this.s = 30
            this.isSendCode = false;
            this.verifyCode = ""
          })
    },
    //滑块失败
    onFailSlider() {

    },
    //刷新滑块
    onRefreshSlider() {

    },
    //注册
    reg() {
      let b = this.checkNickName();
      let b1 = this.checkEmail();
      let b2 = this.checkIphoneIsNull();
      let b3 = this.checkPwd();
      let b4 = this.checkVerCode();
      if (!b || !b1 || !b2 || !b3 || !b4) {
        return
      }
      let data = {
        userNickName: this.nickName,
        iphoneNo: this.iphoneNo,
        email: this.email,
        userPwd: this.MD5(this.pwd),
        verifyCode: this.verifyCode,
      }
      //数据校验成功,发送注册请求
      this.axios.post(`/login-web/reg/user`, data)
          .then((data) => {
            console.log(111);
            console.log(data);
            console.log(data.code);
            if (data.code == 10006) {
              this.iphoneNoTip = data.msg
            }
            if (data.code == 10020) {
              this.verifyCodeTip = data.msg
            }
            if (data.code == 200) {   //注册成功
              this.bus.$emit("my-event-iphone-no", this.iphoneNo)
              this.$router.push("/login")
            }
          })

    }
  },
  //钩子函数
  mounted() {
  }
}
</script>

<style lang="less" scoped>
.register-container {
  display: flex;
}

.box {
  width: 100%;
  height: calc(100vh - 70px);
  align-self: auto;
  background-image: url("../../assets/login/reg-bg.png");
  background-size: 100%;
  background-repeat: no-repeat;
}

.reg-box {
  border: 1px solid #000000;
  min-width: 400px;
  width: 18%;
  //height: calc(50vh - 35px);
  background-color: #EEEEEE;
  border-radius: 4px;
  position: absolute;
  top: calc(70px + 10vh);
  right: 8%;
  display: flex;
  flex-direction: column;
  /*欢迎注册*/

  .top {
    font-size: 36px;
    color: #000;
    margin: 20px 0px 20px 20px;
    font-weight: bolder;
  }

  /*主体内容盒子*/

  .content {
    display: flex;
    flex-direction: column;
    /*单独每个内容盒子*/

    .c-box {
      display: flex;
      flex-direction: column;
      padding-bottom: 10px;

      /*输入框描述文字*/

      .text {
        width: 20%;
        line-height: 40px;
        font_size: 14px;
        text-align: right;
        padding-right: 3%;
        color: #333;
      }

      .input {
        width: 70%;
      }

      .slider { //滑块
        margin: 0 auto;
      }

      .yzm, //验证码
      .djs { //倒计时
        border-radius: 4px;
        height: 40px;
        line-height: 40px;
        text-align: center;
      }

      .yzm { //验证码
        cursor: pointer;
        font-size: 16px;
        font-weight: bolder;
        color: #FFF;
        background-color: #194afa;
      }

      .djs {
        font-size: 16px;
        font-weight: lighter;
        background-color: #a3b6f6;
      }

      /deep/ .ivu-input {
      }

      .tip {
        height: 20px;
        margin-left: 20%;
        font-size: 12px;
        color: #F00;
      }

    }

    .read {
      margin: 10px auto;
      font-size: 12px;
    }

    @btn-height: 46px;

    .btn-isRead {
      margin: 10px auto 20px auto;
      width: 80%;
      background-color: #194afa;
      height: @btn-height;
      border-radius: 6px;
      color: #EEEEEE;
      font-size: 24px;
      line-height: @btn-height;
      text-align: center;
      font-weight: bolder;
      cursor: pointer;
    }

    .btn-isNotRead {
      margin: 10px auto 20px auto;
      width: 80%;
      background-color: #8fa5f3;
      height: @btn-height;
      border-radius: 6px;
      color: #EEEEEE;
      font-size: 24px;
      line-height: @btn-height;
      text-align: center;
      font-weight: bolder;
      cursor: pointer;
    }
  }
}

/*通用*/
.row {
  display: flex;
  flex-direction: row;
}
</style>